<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <ul class="list one">
            <li id="first">01</li>
            <li class="mid">02</li>
            <li class="mid">03</li>
            <li name="four">04</li>
        </ul>
        <ul class="list two">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
        </ul>


    </div>
</body>
<script>
    // 文档查找  => 查找页面中所有的 (缺点-> 没有办法限制查询的范围)
    // 从文档中对应 id名 class名 标签名 name属性查找元素
    // document.getElementById()
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // 通过父元素查找(通过父元素查找对应的子(代)元素 -> 限制查询的范围)
    // parent.getElementsByClassName()
    // parent.getElementsByTagName()

    // 注意: 通过父元素查找子(代)元素时,只能通过class名和标签名查找 (不能通过id和name->官方没有提供 -> 想要使用id和name查找,通过文档查找即可)

    // 查找 .one li
    var one = document.getElementsByClassName("one")[0];
    var liList = one.getElementsByTagName("li");
    console.log(liList);

    // 查找 .one .mid
    var midList = one.getElementsByClassName("mid");
    console.log(midList);

    // 查找 .one #first  => 
    // 报错: one.getElementById is not a function 没有这个方法
    // var first = one.getElementById("first");
    // console.log(first);

    // 报错: one.getElementsByName  is not a function 没有这个方法
    // var four = one.getElementsByName("four");
    // console.log(four);





</script>
</html>